<template>
    <div>
        <div class="cont">
            <div class="left">
                <div class="left1">
                    <div class="left10">AI监测</div>
                    <div class="left11">{{ dataA1 }}次</div>
                    <div class="left12">
                        <div class="chid">
                            <img src="../../assets/img/gd2.png" alt="" />
                            <div class="titt">{{ dataA2 }}次</div>
                            <div class="titt1">未穿工作服</div>
                        </div>
                        <div class="chid">
                            <img src="../../assets/img/gd1.png" alt="" />
                            <div class="titt">{{ dataA3 }}次</div>
                            <div class="titt1">未戴安全帽</div>
                        </div>
                        <div class="chid">
                            <img src="../../assets/img/gd3.png" alt="" />
                            <div class="titt">{{ dataA4 }}次</div>
                            <div class="titt1">未穿反光衣</div>
                        </div>
                    </div>
                </div>
                <div class="left2">
                    <div class="left10">危险因素占比</div>
                    <div id="schart6"></div>
                </div>
            </div>
            <div class="tuceng0" v-show="bimgshow">
                <div class="tuceng" @click="bimgshow = false">
                    <img :src="bigimg" alt="" />
                    <!-- <div class="closeimg" @click="closeimg">X</div> -->
                </div>
            </div>
            <div class="right">
                <div class="main" v-for="(value, index) in list" :key="index" @click="bigClick(index)">
                    <img :src="value.path" alt="" style="width: 415px; height: 217px" />
                    <div class="bot">
                        <div class="bot1">{{ value.type }}</div>
                        <div class="bot2">{{ value.datetime }}</div>
                    </div>
                </div>
                <button class="butt" v-if="moreShowBoolen" @click="moreShow">点击查询更多</button>

                <button class="butt" v-else>已无更多</button>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: {
        Pagination
    },
    directives: {
        waves
    },
    data() {
        return {
            list: [],
            dataA1: '',
            dataA2: '',
            dataA3: '',
            dataA4: '',
            moreShowBoolen: false,
            section_id: '',
            nowPage: 1,
            bigimg: '',
            bimgshow: false
        };
    },
    created() {
        this.section_id = localStorage.getItem('section_id');
        console.log(this.section_id);
    },
    methods: {
        // 点击放大图片事件
        bigClick(index) {
            this.bimgshow = true;
            this.bigimg = this.list[index].path;
        },
        closeimg() {
            this.bimgshow = false;
        },
        moreShow() {
            // 点击查询更多
            var me = this;
            ajax(
                'AiMonitoring/FindAiMonitoring',
                {
                    pageSize: 100000,
                    pageNo: 1,
                    section_id: this.section_id
                },
                function (data) {
                    // me.list = data.items.slice(0, 9);
                    var arr = data.items;
                    for (var i = 0; i < arr.length; i++) {
                        arr[i].path = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/' + arr[i].path;
                    }
                    data.items = arr;
                    me.moreShowBoolen = true;
                    me.list = me.list.concat(data.items.slice(me.nowPage * 9, (me.nowPage + 1) * 9));

                    me.nowPage++;
                    console.log(me.list, 7777);

                    if (data.items.length >= me.nowPage * 9) {
                        me.moreShowBoolen = true;
                    } else {
                        me.moreShowBoolen = false;
                    }
                }
            );
        }
    },
    mounted() {
        var me = this;
        ajax(
            'AiMonitoring/CountAi',
            {
                section_id: this.section_id
            },
            function (data) {
                me.dataA1 = data;
            }
        );
        ajax(
            'AiMonitoring/CountFind2',
            {
                section_id: this.section_id
            },
            function (data) {
                me.dataA2 = data[0].count;
            }
        );
        ajax(
            'AiMonitoring/CountFind1',
            {
                section_id: this.section_id
            },
            function (data) {
                me.dataA3 = data[0].count;
            }
        );
        ajax(
            'AiMonitoring/CountFind3',
            {
                section_id: this.section_id
            },
            function (data) {
                me.dataA4 = data[0].count;
            }
        );
        ajax(
            'AiMonitoring/FindAiMonitoring',
            {
                pageSize: 9000,
                pageNo: 1,
                section_id: this.section_id
            },
            function (data) {
                var arr = data.items;
                for (var i = 0; i < arr.length; i++) {
                    arr[i].path = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/' + arr[i].path;
                }
                data.items = arr;
                // console.log(arr);
                if (data.items.length <= 9) {
                    // 9条数据一页

                    me.list = data.items;
                    console.log(me.list, 8888);

                    me.moreShowBoolen = false;
                } else {
                    me.list = data.items.slice(0, 9);
                    console.log(me.list, 9999);
                    me.moreShowBoolen = true;
                }
            }
        );
        ajax(
            'AiMonitoring/CountFind',
            {
                section_id: this.section_id
            },
            function (data) {
                var data1 = data.map((a) => a.type);
                var data2 = JSON.parse(JSON.stringify(data).replace(/type/g, 'name').replace(/count/g, 'value'));
                let myChart6 = echarts.init(document.getElementById('schart6'));
                let options6 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color: ['#409EFF', '#67C23A', '#fcc11e', '#ffd200', '#7ba1ce', '#F56C6C'],
                    legend: {
                        textStyle: {
                            color: '#fff',
                            fontWeight: 600
                        },
                        x: 'center', //可设定图例在左、右、居中
                        y: 'bottom', //可设定图例在上、下、居中
                        padding: [0, 0, 40, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                        data: data1
                    },
                    series: [
                        {
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        textStyle: {
                                            fontWeight: 600,
                                            fontSize: 15 //文字的字体大小
                                        },
                                        // position:'inner',
                                        formatter: ' {c} ({d}%)'
                                    },
                                    labelLine: {
                                        show: true
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        position: 'center',
                                        textStyle: {
                                            fontSize: '17',
                                            fontWeight: 600
                                        }
                                    }
                                }
                            },
                            name: '危险因素',
                            type: 'pie',
                            radius: '40%',
                            center: ['50%', '45%'],
                            selectedMode: 'single',
                            data: data2,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart6.setOption(options6);
                //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
                window.addEventListener('resize', function () {
                    // myChart1.resize();
                    myChart6.resize();
                });
            }
        );
    }
};
</script>

<style scoped>
.tuceng0 {
    position: absolute;
    left: 23%;
    top: 95px;
    width: 80%;
    display: flex;
    justify-content: center;
}

.tuceng {
    z-index: 999;
    background: rgb(253, 253, 253);
    display: flex;
    justify-content: center;
}

.tuceng img {
    width: 1350px;
    height: 100%;
}

.cont {
    margin-top: 40px;
    width: 96%;
    height: 884px;
    display: flex;
    justify-content: space-around;
    background-size: 100% 100%;
    margin-left: 2%;
}

.left {
    width: 415px;
    height: 900px;
}

.left1 {
    width: 415px;
    height: 394px;
    background: url(../../assets/img/box.png) no-repeat;
    background-size: 100% 100%;
}

.left2 {
    margin-top: 30px;
    width: 415px;
    height: 394px;
    background: url(../../assets/img/box.png) no-repeat;
    background-size: 100% 100%;
}

.left10 {
    width: 415px;
    height: 64px;
    height: 24px;
    opacity: 1;
    line-height: 64px;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    color: #bfe0eb;
    letter-spacing: 1px;
}

#schart6 {
    margin-top: 29px;
    width: 415px;
    height: 330px;
}

.left11 {
    float: left;
    margin-top: 20px;
    width: 415px;
    height: 74px;
    line-height: 74px;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    color: #ffef4e;
    letter-spacing: 2px;
}

.left12 {
    float: left;
    margin-top: 40px;
    width: 415px;
    height: 220px;
    display: flex;
    justify-content: space-around;
}

.chid {
    width: 100px;
    height: 220px;
}

.chid img {
    width: 60px;
    height: 60px;
    float: left;
    margin-left: 20px;
}

.titt {
    float: left;
    margin-top: 30px;
    width: 100px;
    height: 24px;
    font-size: 24px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    line-height: 20px;
    letter-spacing: 1px;
}

.titt1 {
    margin-top: 20px;
    float: left;
    width: 100px;
    height: 16px;
    font-size: 16px;
    text-align: center;
    color: #bfe0eb;
    line-height: 16px;
}

.right {
    width: 1317px;
    height: 820px;
    padding-top: 10px;
    /* background: rgb(33, 18, 71); */
    overflow-x: hidden;
    overflow-y: scroll;
    white-space: nowrap;
}

.main {
    margin-left: 13px;
    margin-top: 35px;
    float: left;
    width: 414px;
    height: 216px;
    border: 2px solid #0078ff;
    position: relative;
}

.bot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 414px;
    height: 46px;
    background: rgb(0, 0, 0, 0.4);
    display: flex;
    justify-content: space-around;
}

.bot1 {
    width: 154px;
    height: 46px;
    font-size: 18px;
    line-height: 46px;
    font-weight: 500;
    text-align: left;
    color: #00a8ff;
    text-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.13);
}

.bot2 {
    width: 154px;
    height: 46px;
    font-size: 18px;
    line-height: 46px;
    color: white;
}

.butt {
    float: left;
    width: 200px;
    height: 30px;
    cursor: pointer;
    /* margin-left: 550px; */
    background: rgb(6, 8, 99);
    border: none;
    color: white;
    margin: 10px 0 10px 550px;
}

div::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

div::-webkit-scrollbar-track {
    background: rgb(20, 44, 109);
}

div::-webkit-scrollbar-thumb {
    background: #68b7d6;
    border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
    background: rgb(92, 153, 211);
}

div::-webkit-scrollbar-corner {
    background: #179a16;
}
</style>